/**
 * @copyright   2010-2017, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@include export("steps") {
    $titon-steps-class-item: generate-class-name($titon-steps, "item");

    #{generate-class-name($titon-steps)} {
        font-size: theme-setting("medium-font-size");
        background: theme-setting("bg-light");
        display: inline-block;

        ol {
            @extend %placeholder-list;
            overflow: hidden;
            display: flex;
        }

        li {
            &:first-child {
                #{$titon-steps-class-item} {
                    padding-#{bidi-alignment()}: 2em;
                }
            }

            &:last-child {
                #{$titon-steps-class-item} {
                    &::after {
                        display: none;
                    }
                }
            }
        }
    }

    // Use em's to scale against the font size defined on .steps
    #{$titon-steps-class-item} {
        padding-#{bidi-alignment()}: 3.5em;
        padding-#{bidi-opposite-alignment()}: 2em;
        position: relative;
        display: block;
        line-height: 3em;
        height: 3em;
        background: none;
        border: 0;

        &.is-complete {
            background: #fff;
        }

        // Golden ratio? Seems to work for all font sizes in *most* browsers
        &::after {
            height: 2.165em;
            width: 2.165em;
            top: 0.425em;
            #{bidi-opposite-alignment()}: -1.1em;
            position: absolute;
            z-index: 2;
            content: "";
            transform: if(setting("text-direction") == rtl, rotate(45deg), rotate(-45deg));
            background: inherit;
            border-#{bidi-opposite-alignment()}: 1px solid theme-setting("bg");
            border-bottom: 1px solid theme-setting("bg");
        }
    }
}
